<template>
  <div>
    <el-button type="primary" @click="router.push('/crud/footerballinfo')"
      >返回</el-button
    >
  </div>
  <div v-loading="loading">
    <el-card v-if="footerball.title">
      <template #header>
        <div class="footerball-title">
          <div>
            {{ footerball.ftid }}
          </div>
          <div>
            {{ footerball.league }}
            <br />
            {{ tools.formatDate(footerball.created) }}
          </div>
        </div>
      </template>
      <div class="footerball"><div v-html="footerball.intro"></div></div>
    </el-card>
  </div>
  <div>
    <!-- {{ news }} -->
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { api } from '../../js/ajax'
import { tools } from '../../js/tools'
import { ElMessageBox } from 'element-plus'

const router = useRouter()
const route = useRoute()

const nid = ref(route.query.ftid)
const news = ref({})
const loading = ref(false)
const query = () => {
  loading.value = true
  api.get(`/crud/footballteam/${nid.value}`, {}, data => {
    loading.value = false
    if (data.success) {
      news.value = data.data
      return
    }
    ElMessageBox.alert(data.message, '足球俱乐部').finally(() => {
      router.push('/crud/footerballinfo')
    })
  })
}
query()
</script>

<style scoped>
.footerball {
  width: 80%;
}
.footerball:deep p {
  text-indent: 2em;
}
.footerball:deep img {
  display: block;
  width: 100%;
  height: auto;
}

.footerball-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footerball-title > div:first-of-type {
  font-size: 1.5rem;
}
.el-card {
  width: 80vw;
  margin: 0 auto;
}
</style>
